<template>
  <div class="gnb-top-bar flex-horiz flex-not-shk pa-sm box-shadow-thin "
       style="z-index: 5;background-color: #fff;"
  >
    <div class="">
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit" @click="showNotesDialog = true">笔记本</el-button>
        <el-dropdown>
          <el-button type="primary" block style="min-width: 200px;">
            <div class="flex-horiz">
              <div class="flex-grow text-left">
                {{ selectedNote ? selectedNote.name : "请选择笔记本" }}
              </div>
              <div class="flex-not-shk"><i class="el-icon-caret-bottom"></i></div>
            </div>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="!notes.length">
                当前无笔记本（点击添加笔记本）
              </el-dropdown-item>
              <el-dropdown-item v-for="item in notes" @click="onClickNote(item)">
                <i class="el-icon-notebook-1"></i>{{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button-group>
    </div>
    <div class="ml-sm" title="同步当前 Git 笔记">
      <el-button circle
                 @click="onClickSyncNote"
      >
        <i class="el-icon-refresh"
           :class="gitSync? 'rotation' : ''"
        ></i>
      </el-button>
    </div>
    <el-dialog
        title="笔记本"
        append-to-body
        v-model="showNotesDialog"
        width="700px"
        modal-class="notes-dialog"
        destroy-on-close
    >
      <template #title>
        <div class="flex-horiz flex-center">
          <div class="mr-sm"><i class="el-icon-notebook-1"></i> 笔记本</div>
          <div>
            <el-button icon="el-icon-plus"
                       type="primary"
                       @click="showAddNoteDialog = true"
            >添加笔记本
            </el-button>
          </div>
        </div>
      </template>
      <gnb-notes/>
    </el-dialog>

    <el-dialog
        append-to-body
        v-model="showAddNoteDialog"
        modal-class="notes-dialog"
        width="500px"
        destroy-on-close
    >
      <template #title>
        <div class="flex-horiz flex-center">
          <div class="mr-sm"><i class="el-icon-circle-plus"></i> 添加笔记</div>
        </div>
      </template>
      <gnb-add-note @on-add-success="onAddSuccess"/>
    </el-dialog>

  </div>
</template>

<script lang="ts">
import {mapState, useStore} from "vuex";
import GnbNotes from "@/components/gnb-notes.vue";
import {computed, ref, toRaw} from "vue";
import GnbAddNote from "@/components/gnb-add-note.vue";
import {IpcRenderer} from "@/utils/render/common";

export default {
  name: 'gnb-top-bar',
  mixins: [],
  components: {GnbAddNote, GnbNotes},
  props: {},
  data() {
    return {}
  },
  setup() {

    const store = useStore();

    const onClickNote = (item) => {
      store.dispatch("setSelectedNote", item);
      store.dispatch("syncNoteDirectories");
    }

    const showNotesDialog = ref(false);
    const showAddNoteDialog = ref(false);

    const onAddSuccess = () => {
      showAddNoteDialog.value = false;
    }

    const gitSync = computed(() => store.state.note.gitSync);
    const selectedNote = computed(() => store.state.note.selectedNote);
    const notes = computed(() => store.state.note.notes);

    const onClickSyncNote = () => {
      if (gitSync.value || !selectedNote.value) return;
      IpcRenderer.invoke("syncNote", toRaw(selectedNote.value));
    }


    return {
      showNotesDialog,
      showAddNoteDialog,
      gitSync,
      selectedNote,
      notes,

      onAddSuccess,
      onClickNote,
      onClickSyncNote,
    }
  },
  computed: {
    ...mapState({

      notes: (state: { note }) => state.note.notes,
    }),
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {}
};
</script>

<style scoped lang="less">
.gnb-top-bar {

}
</style>